import React from 'react';
import { Loader2 } from 'lucide-react';

interface QuizGeneratorProps {
  topic: string;
}

export const QuizGenerator: React.FC<QuizGeneratorProps> = ({ topic }) => {
  return (
    <div className="flex flex-col items-center justify-center h-full text-slate-600 animate-in fade-in duration-500">
      <div className="relative">
        <div className="absolute inset-0 bg-indigo-100 rounded-full animate-ping opacity-75"></div>
        <div className="relative bg-white p-4 rounded-full shadow-lg">
            <Loader2 className="w-12 h-12 text-primary animate-spin" />
        </div>
      </div>
      <h2 className="mt-8 text-2xl font-semibold text-slate-800">正在生成试卷</h2>
      <p className="mt-2 text-slate-500">AI 正在为您准备关于 "{topic}" 的试题...</p>
      <div className="mt-8 max-w-md w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
        <div className="bg-primary h-2.5 rounded-full animate-[progress_2s_ease-in-out_infinite]"></div>
      </div>
      <style>{`
        @keyframes progress {
          0% { width: 0%; margin-left: 0%; }
          50% { width: 70%; margin-left: 30%; }
          100% { width: 0%; margin-left: 100%; }
        }
      `}</style>
    </div>
  );
};